<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="'确定消费赠送'"
    :body-style="{ paddingBottom: '30px' }"
    :maskClosable="false"
    @update:visible="updateVisible"
    @ok="save"
    @cancel="cancel"
  >
    <div>
      <div class="margin-bottom-15">获赠卡券</div>
      <vxe-table border ref="xTable" :data="tableDataKa">
        <vxe-column field="type" title="卡劵类型" />
        <vxe-column field="name" title="卡劵名称" />
        <vxe-column field="num" title="赠送数量" />
        <vxe-column field="rule" title="赠送规则" />
        <vxe-column field="send" title="是否赠送">
          <template #default="{ row }">
            <a-switch v-model:checked="row.send" />
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div>
      <div class="flex align-center margin-y-30">
        <div class="= flex1">获赠积分礼金</div>
        <div>
          <a-space>
            <span>应送积分：{{ send_cash || 0 }}</span>
            <span>应送礼金：{{ send_points || 0 }}</span>
          </a-space>
        </div>
      </div>
      <div>
        <vxe-table border ref="xTable" :data="tableDataCash">
          <vxe-column field="info" title="消费货品">
            <template #default="{ row }">
              <div>{{ row.name }}</div>
              <div> {{ row.type_name }} </div>
              <div> 实售价（元）{{ row.real_amount || 0 }} </div>
            </template>
          </vxe-column>
          <vxe-column field="send_points" title="获赠积分">
            <template #default="{ row }">
              <a-input
                allow-clear
                v-model:value="row.send_points"
                placeholder="请输入"
              />
            </template>
          </vxe-column>
          <vxe-column field="send_cash" title="获赠礼金">
            <template #default="{ row }">
              <a-input
                allow-clear
                v-model:value="row.send_cash"
                placeholder="请输入"
              />
            </template>
          </vxe-column>
          <vxe-column field="send_cash" title="获赠储值金">
            <template #default="{ row }">
              <a-input
                allow-clear
                v-model:value="row.send_prepaid"
                placeholder="请输入"
              />
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Modal, message, Form } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import {
    get_points,
    set_points,
    cancel_points
  } from '@/api/order/order/jewelry_order';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    member_id: [Number, String],
    order_sn: String
  });

  const emit = defineEmits(['doSend', 'get_been_order', 'update:visible']);

  const loading = ref(false);
  const tableDataKa = ref([
    {
      type: '卡劵类型',
      name: '卡劵名称',
      num: '1',
      rule: '规则规则',
      send: false
    }
  ]);
  const tableDataCash = ref([]);
  const send_cash = ref(0);
  const send_points = ref(0);

  const form = reactive({
    member_id: props.member_id,
    order_sn: props.order_sn,
    order_item: []
  });

  onMounted(() => {
    get_points({ member_id: props.member_id, order_sn: props.order_sn })
      .then((res) => {
        send_cash.value = res.data.send_cash;
        send_points.value = res.data.send_points;
        tableDataCash.value = res.data.order_item;
      })
      .catch((e) => {
        message.error(e);
      });
  });

  const save = () => {
    console.log('点击确定');
    form.order_item = [];
    tableDataCash.value.forEach((item) => {
      form.order_item.push({
        item_id: item.id,
        send_points: item.send_points,
        send_cash: item.send_cash,
        send_prepaid: item.send_prepaid
      });
    });
    set_points(form)
      .then((res) => {
        emit('doSend');
        message.success(res.msg);
        updateVisible(false);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const cancel = () => {
    console.log('点击取消');
    updateVisible(true);
    cancel_points({ member_id: props.member_id, order_sn: props.order_sn })
      .then((res) => {
        emit('clear_been_order');
        updateVisible(false);
        message.success(res.msg);
      })
      .catch((e) => {
        updateVisible(true);
        message.error(e);
      });
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
